<template>
	<div>
		<div class="dv1">
		  <van-row>
		    <van-col class="dv11" span="24" offset="0">
		       <van-image :src="require('../assets/微信图片_20221219094149.png')" />
		    </van-col>
		  </van-row>
		</div>
		<div text align = "left" class="dd">
			<h2>精品排行</h2>
		</div>
		<div>
			<van-grid direction="horizontal" :column-num="2" reverse ="true" icon-size="50px">
			  <van-grid-item icon="https://iphoto.mac89.com/icon/icon/256/20210406/114836/4549372.png" text="必吃榜" />
			  <van-grid-item icon="https://iphoto.mac89.com/icon/icon/256/20210406/114836/4549358.png" text="网红店铺" />
			</van-grid>

		</div>
		<div class="d1">
			<van-grid icon-size="50px" border="false">
			  <van-grid-item icon="https://iphoto.mac89.com/icon/icon/256/20210423/116279/4661278.png" text="必逛榜" />
			  <van-grid-item icon="https://iphoto.mac89.com/icon/icon/256/20210406/114836/4549378.png" text="必住榜" />
			  <van-grid-item icon="https://iphoto.mac89.com/icon/icon/256/20210406/114836/4549376.png" text="必玩榜" />
			  <van-grid-item icon="https://tse4-mm.cn.bing.net/th/id/OIP-C.7fFfSCXL5sQmab9fNOnTLgHaHa?w=161&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" text="人气榜" />
			</van-grid>
		</div>
		<van-divider
		  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 0px' }"
		>
		</van-divider>
		<div text align = "left" class="dd">
			<h2>好店指南</h2>
		</div>
		  <div>
		    <van-card
		        v-for="(o,index) in objs"
            desc="描述信息"
		        thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
		    >
		      <template #price>
		        <van-row style="font-size: 20px;width: 100%">
		          <van-col :span="8">
		            <van-icon name="eye-o" />{{o.looks}}
		          </van-col>
		          <van-col :span="8" @click="like(index)">
		            <van-icon :name="lickicon" color="red" />{{o.likes}}
		          </van-col>
		          <van-col :span="8">
		            <van-icon name="fire-o" />22
		          </van-col>
		        </van-row>
		      </template>
		    </van-card>
		  </div>
	</div>
</template>

<script>
	export default {
	  name: "StudyTest",
	  data(){
	    return{
	      lickicon:"like-o",
	      showList:false,
	      objs:[
	        {
			      info:"喜欢就来买把哈哈哈",
			      looks:22,
	          likes:18
	        }
	      ]
	    }
	  },
	  methods:{
	    like(index){
	      if(this.lickicon=="like"){
	        this.lickicon="like-o";
	        this.objs[index].likes--;
	      }else {
	        this.lickicon="like";
	        this.objs[index].likes++;
	      }
	    }
	  }
	}
</script>

<style>
	.d1{
		margin-top: 30px;
	}
	.dd{
		margin-left: 20px;
		margin-bottom: 1px;
	}
</style>